<template>
  <div class="dy-main MyInsuranceDetail">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">保单详情</x-header>
    </div>
    <div class="dy-body">
      <div class="contant">
        <div class="prdInfo">
          <div class="left">
            <div class="prdName">{{ riskName }}</div>
            <div><img class="msgInfoIcon" src="../../assets/img/Insurance/msgInfo.png"></div>
            <div class="prdRules">《保险条款》</div>
            <div class="prdCode">NO.{{ contNo }}</div>
          </div>
          <div class="right">
            <img class="statusIcon" src="../../assets/img/Insurance/InsuranceStatus.png">
          </div>
        </div>
        <div>
          <dl>
            <dt>保单号</dt>
            <dd>{{ InsuranceNo }}</dd>
          </dl>
          <dl>
            <dt>保费</dt>
            <dd>{{ prem }}</dd>
          </dl>
          <dl>
            <dt>投保日期</dt>
            <dd>{{ signDate }}</dd>
          </dl>
          <dl>
            <dt>购买渠道</dt>
            <dd>{{ BuyChannel }}</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      riskName: '',
      contNo: '',
      prem: '',
      signDate: '',
      BuyChannel: '',
      InsuranceNo: ''
    }
  },
  methods: {
    getMyInsuranceDetail () {
      let self = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'MyInsuranceDetailSearch'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let data = response.data.data[0]
            self.riskName = data.riskName
            self.contNo = data.contNo
            self.prem = data.prem
            self.signDate = data.signDate
            self.BuyChannel = data.BuyChannel
            self.InsuranceNo = data.InsuranceNo
          } else {
            alert('fail')
          }
        }
      )
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  created () {
    // this.prdName = this.$route.query.PrdName
    // this.prdCode = this.$route.query.PrdNum
    this.getMyInsuranceDetail()
  }
}
</script>

<style lang="less">
.MyInsuranceDetail{
  .dy-body{
    .contant{
      background: #fff;
      margin-top: 0.2rem;
      .prdInfo{
        padding-top: 0.2rem;
        .left{
          float: left;
          width: 50%;
          height: 1.4rem;
          font-size: 0.28rem;
          position: relative;
          >div{
            display: inline-block;
          }
          .prdName{
            margin: 0.38rem 0.35rem 0.22rem 0.3rem;
            font-weight: bolder;
          }
          .msgInfoIcon{
            width: 0.3rem;
            height: 0.3rem;
            position: relative;
            top: 0.06rem;
          }
          .prdRules{
            color: #3333FF;
            font-size: 0.24rem;
          }
          .prdCode{
            margin-left: 0.3rem;
          }
        }
        .right{
          float: right;
          .statusIcon{
            width: 1.15rem;
            height: 1.15rem;
            margin: 0.12rem 0.3rem 0.13rem 0;
          }
        }
      }
      dl{
        display: flex;
        height: 0.88rem;;
        line-height: 0.88rem;
        border-top: 1px solid #EAEAEA;
        width: 92%;
        margin: 0 auto;
      }
      dl dt,dd{
        flex: 1;
        font-size: 0.28rem;
        color: #333333;
      }
      dd{
        text-align: right;
        color: #999999;
      }
    }
  }
}
</style>
